<!-- 视频管理 -->

<template>
    <!-- 面包屑导航 -->
    <a-breadcrumb>
        <a-breadcrumb-item>admin</a-breadcrumb-item>
        <a-breadcrumb-item>视频管理</a-breadcrumb-item>
    </a-breadcrumb>

    <div style="margin: 15px 0;">
        <!-- 视频类型选择 -->
        <a-form-item label="请选择类型">
            <a-select v-model="videoCate" @change="videoCateOnSelected" :style="{width:'120px'}" placeholder="选择分类">
                <a-option :value="cate.id" v-for="cate in cateList">{{cate.name}}</a-option>
            </a-select>
        </a-form-item>
        <!-- 数据表格 -->
        <div style="max-height: 620px;">
            <a-table column-resizable :columns="tableColumns" :hoverable="true" :stripe="true" :data="videoList"
                :scroll="{x: '120%', y: '100%'}">
                <template #operate="{ record }">
                    <a-button size="small" type="primary" @click="showCommentForm(record)">点评</a-button>
                    <a-button size="small" status="success" @click="showEditForm(record)" style="margin-left: 5px;">编辑
                    </a-button>
                    <a-popconfirm content="确定删除吗?" type="warning" @ok="deleteVideo(record.id)">
                        <a-button size="small" status="danger" style="margin-left: 5px;">删除</a-button>
                    </a-popconfirm>
                </template>
            </a-table>
        </div>

        <!-- 添加按钮 -->
        <div style="margin: 10px 0;">
            <a-button type="primary" @click="showAddForm">
                <template #icon>
                    <icon-plus />
                </template>
                <template #default>添加</template>
            </a-button>
        </div>
    </div>

    <!-- 弹出点评表单 -->
    <a-modal title="点评" v-model:visible="commentFormIsShow" @cancel="commentFormCancel" @ok="commentFormOk">
        <a-row>
            <a-form-item label="点评：">
                <a-input v-model="newComment" />
            </a-form-item>
        </a-row>
    </a-modal>

    <!-- 弹出添加/编辑表单 -->
    <a-modal :title="addFormTitle" v-model:visible="addFormIsShow" @cancel="addFormCancel" @ok="addFormOk">
        <a-form :model="addVideoFormData">
            <a-form-item field="name" label="名称">
                <a-input v-model="addVideoFormData.name" />
            </a-form-item>
            <a-form-item field="url" label="url">
                <a-input v-model="addVideoFormData.url" />
            </a-form-item>
            <a-form-item field="img" label="图片">
                <a-input v-model="addVideoFormData.img" />
            </a-form-item>
            <a-form-item field="category" label="类型">
                <a-input v-model="addVideoFormData.category" />
            </a-form-item>
            <a-form-item field="region" label="地区">
                <a-input v-model="addVideoFormData.region" />
            </a-form-item>
            <a-form-item field="year" label="年份">
                <a-input-number :default-value="2000" :step="1" :max="2035" :min="1992" allow-clear
                    v-model="addVideoFormData.year" />
            </a-form-item>
            <a-form-item field="actors" label="主演">
                <a-input v-model="addVideoFormData.actors" />
            </a-form-item>
            <a-form-item field="director" label="导演">
                <a-input v-model="addVideoFormData.director" />
            </a-form-item>
            <a-form-item field="intro" label="简介">
                <a-textarea v-model="addVideoFormData.intro" placeholder="请输入视频简介" auto-size allow-clear />
            </a-form-item>
            <a-form-item field="comment" label="点评">
                <a-input v-model="addVideoFormData.comment" />
            </a-form-item>
        </a-form>
    </a-modal>
</template>

<script>
import { ref, } from 'vue';
import { IconPlus, } from '@arco-design/web-vue/es/icon';
import { Message } from '@arco-design/web-vue';
import { getAllTeleplay, doTeleplayComment, addTeleplay, editTeleplay, deleteTeleplay } from '../../api/teleplay';
import { getAllMovie, doMovieComment, addMovie, editMovie, deleteMovie } from '../../api/movie';
import { getAllAnimation, doAnimationComment, addAnimation, editAnimation, deleteAnimation } from '../../api/animation';


export default {
    components: {
        IconPlus,
    },
    setup() {
        // 表格列定义
        const tableColumns = ref([
            {
                title: 'Id',
                dataIndex: 'id',
                width: 80,
                ellipsis: true,
                tooltip: true,
            },
            {
                title: '名称',
                dataIndex: 'name',
            },
            {
                title: '地址',
                dataIndex: 'url',
                width: 80,
                ellipsis: true,
                tooltip: true,
            },
            {
                title: '图片',
                dataIndex: 'img',
                width: 80,
                ellipsis: true,
                tooltip: true,
            },
            {
                title: '类型',
                dataIndex: 'category',
            },
            {
                title: '地区',
                dataIndex: 'region',
            },
            {
                title: '年份',
                dataIndex: 'year',
            },
            {
                title: '主演',
                dataIndex: 'actors',
                width: 120,
                ellipsis: true,
                tooltip: true,
            },
            {
                title: '导演',
                dataIndex: 'director',
            },
            {
                title: '点评',
                dataIndex: 'comment',
            },
            {
                title: '操作',
                slotName: 'operate',
                fixed: 'right',
                width: 230,
            }
        ]);

        // 视频分类
        const cateList = ref([
            { id: '电视剧', name: '电视剧' },
            { id: '电影', name: '电影' },
            { id: '动漫', name: '动漫' },
        ]);

        // 选中的视频分类
        const videoCate = ref('');

        // 视频列表数据
        const videoList = ref([]);

        // 分类选择框选择事件
        const videoCateOnSelected = (cate) => {
            switch (cate) {
                case '电视剧':
                    getTeleplays();
                    break;
                case '电影':
                    getMovies();
                    break;
                case '动漫':
                    getAnimations();
                    break;

                default:
                    break;
            }
        };

        // 获取电视剧数据
        const getTeleplays = () => {
            getAllTeleplay().then(res => {
                if (res.code != 200) {
                    Message.error('数据加载失败');
                    return;
                }
                videoList.value = res.data;
            }).catch(err => console.log(err));
        };

        // 获取电影数据
        const getMovies = () => {
            getAllMovie().then(res => {
                if (res.code != 200) {
                    Message.error('数据加载失败');
                    return;
                }
                videoList.value = res.data;
            }).catch(err => console.log(err));
        };

        // 获取动漫数据
        const getAnimations = () => {
            getAllAnimation().then(res => {
                if (res.code != 200) {
                    Message.error('数据加载失败');
                    return;
                }
                videoList.value = res.data;
            }).catch(err => console.log(err));
        };

        // 点评表单是否显示
        const commentFormIsShow = ref(false);

        // 视频id
        const vid = ref('');

        // 新评语
        const newComment = ref('');

        // 显示点评表单
        const showCommentForm = (record) => {
            vid.value = record.id;
            newComment.value = record.comment;
            commentFormIsShow.value = true;
        }

        // 取消点评表单
        const commentFormCancel = () => {
            newComment.value = '';
            vid.value = '';
            commentFormIsShow.value = false;
        }

        // 提交点评
        const commentFormOk = () => {
            switch (videoCate.value) {
                case '电视剧':
                    doTeleplayComment(vid.value, { comment: newComment.value })
                        .then(res => {
                            if (res.code != 200) {
                                Message.error(`操作失败: ${res.msg}`);
                                return;
                            }
                            newComment.value = '';
                            commentFormIsShow.value = false;
                            // 重新加载数据
                            getTeleplays();
                        }).catch(err => console.log(err));
                    break;
                case '电影':
                    doMovieComment(vid.value, { comment: newComment.value })
                        .then(res => {
                            if (res.code != 200) {
                                Message.error(`操作失败: ${res.msg}`);
                                return;
                            }
                            newComment.value = '';
                            commentFormIsShow.value = false;
                            // 重新加载数据
                            getMovies();
                        }).catch(err => console.log(err));
                    break;
                case '动漫':
                    doAnimationComment(vid.value, { comment: newComment.value })
                        .then(res => {
                            if (res.code != 200) {
                                Message.error(`操作失败: ${res.msg}`);
                                return;
                            }
                            newComment.value = '';
                            commentFormIsShow.value = false;
                            // 重新加载数据
                            getAnimations();
                        }).catch(err => console.log(err));
                    break;
                default:
                    break;
            }
        }

        // 是否显示添加/编辑表单
        const addFormIsShow = ref(false);

        // 表单标题
        const addFormTitle = ref('添加视频');

        // 表单数据存储
        const addVideoFormData = ref({
            name: '',
            url: '',
            img: '',
            category: '',
            region: '',
            year: 0,
            actors: '',
            director: '',
            intro: '',
            comment: '',
        });

        // 显示添加视频表单
        const showAddForm = () => {
            addFormTitle.value = '添加视频';
            addFormIsShow.value = true;
        };

        // 提交添加/编辑视频
        const addFormOk = () => {
            switch (videoCate.value) {
                case '电视剧':
                    if (isEdit.value) {    // 是否是编辑视频
                        editTeleplay(vid.value, addVideoFormData.value).then(res => {
                            if (res.code != 200) {
                                Message.error('操作失败');
                                return;
                            }
                            // 重新加载数据
                            getTeleplays();
                            Message.success('操作成功');
                        }).catch(err => console.log(err));
                    } else {    // 添加视频
                        addTeleplay(addVideoFormData.value).then(res => {
                            if (res.code != 200) {
                                Message.error('操作失败');
                                return;
                            }
                            // 重新加载数据
                            getTeleplays();
                            Message.success('操作成功');
                        }).catch(err => console.log(err));
                    }
                    break;

                case '电影':
                    if (isEdit.value) {    // 是否是编辑视频
                        editMovie(vid.value, addVideoFormData.value).then(res => {
                            if (res.code != 200) {
                                Message.error('操作失败');
                                return;
                            }
                            // 重新加载数据
                            getMovies();
                            Message.success('操作成功');
                        }).catch(err => console.log(err));
                    } else {    // 添加视频
                        addMovie(addVideoFormData.value).then(res => {
                            if (res.code != 200) {
                                Message.error('操作失败');
                                return;
                            }
                            // 重新加载数据
                            getMovies();
                            Message.success('操作成功');
                        }).catch(err => console.log(err));
                    }
                    break;

                case '动漫':
                    if (isEdit.value) {    // 是否是编辑视频
                        editAnimation(vid.value, addVideoFormData.value).then(res => {
                            if (res.code != 200) {
                                Message.error('操作失败');
                                return;
                            }
                            // 重新加载数据
                            getAnimations();
                            Message.success('操作成功');
                        }).catch(err => console.log(err));
                    } else {    // 添加视频
                        addMovie(addVideoFormData.value).then(res => {
                            if (res.code != 200) {
                                Message.error('操作失败');
                                return;
                            }
                            // 重新加载数据
                            getAnimations();
                            Message.success('操作成功');
                        }).catch(err => console.log(err));
                    }
                    break;

                default:
                    break;
            }



            isEdit.value = false;
            vid.value = '';
            addVideoFormData.value = {};
            addFormIsShow.value = false;
        };

        // 取消添加视频
        const addFormCancel = () => {
            isEdit.value = false;
            vid.value = '';
            addVideoFormData.value = {};
            addFormIsShow.value = false;
        };

        // 是否为编辑
        const isEdit = ref(false);

        // 显示编辑表单
        const showEditForm = (record) => {
            addFormTitle.value = '编辑视频';
            isEdit.value = true;
            vid.value = record.id;
            addVideoFormData.value = record;
            addFormIsShow.value = true;
        };

        // 删除视频
        const deleteVideo = (id) => {
            switch (videoCate.value) {
                case '电视剧':
                    deleteTeleplay(id).then(res => {
                        if (res.code != 200) {
                            Message.error('操作失败');
                            return;
                        }
                        // 重新加载数据
                        getTeleplays();
                        Message.success('删除成功');
                    }).catch(err => console.log(err));
                    break;
                case '电影':
                    deleteMovie(id).then(res => {
                        if (res.code != 200) {
                            Message.error('操作失败');
                            return;
                        }
                        // 重新加载数据
                        getMovies();
                        Message.success('删除成功');
                    }).catch(err => console.log(err));
                    break;
                case '动漫':
                    deleteAnimation(id).then(res => {
                        if (res.code != 200) {
                            Message.error('操作失败');
                            return;
                        }
                        // 重新加载数据
                        getAnimations();
                        Message.success('删除成功');
                    }).catch(err => console.log(err));
                    break;

                default:
                    break;
            }
        };


        return {
            tableColumns,
            cateList,
            videoCate,
            videoList,
            addFormIsShow,
            addFormTitle,
            addVideoFormData,
            commentFormIsShow,
            newComment,

            showCommentForm,
            commentFormCancel,
            commentFormOk,

            videoCateOnSelected,
            showAddForm,
            addFormOk,
            addFormCancel,
            showEditForm,
            deleteVideo,

        }

    }
}

</script>